@import "../_variables";

// TODO
// - use more variables

.effeckt-positional-modal-wrap {
  position: absolute;
  z-index: 10;
  display: none;

  &.effeckt-front {
    z-index: 20;
  }
}

.effeckt-positional-modal-wrap {

  &[data-effeckt-position="above"] {
    margin-top: -15px;
    .effeckt-modal {
      &:before {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        width: 0;
        height: 0;
        margin-left: -10px;
        border-top: 10px solid #ccc;
        border-right: 10px solid transparent;
        border-left: 10px solid transparent;
      }
    }
  }

  &[data-effeckt-position="below"] {
    margin-top: 15px;
    .effeckt-modal {
      &:before {
        content: "";
        position: absolute;
        bottom: 100%;
        left: 50%;
        width: 0;
        height: 0;
        margin-left: -10px;
        border-bottom: 10px solid #ccc;
        border-right: 10px solid transparent;
        border-left: 10px solid transparent;
      }
    }
  }

  &[data-effeckt-position="right"] {
    margin-left: 15px;
    .effeckt-modal {
      &:before {
        content: "";
        position: absolute;
        top: 50%;
        right: 100%;
        width: 0;
        height: 0;
        margin-top: -10px;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-right: 10px solid #ccc;
      }
    }
  }

  &[data-effeckt-position="left"] {
    margin-left: -15px;
    .effeckt-modal {
      &:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 100%;
        width: 0;
        height: 0;
        margin-top: -10px;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-left: 10px solid #ccc;
      }
    }
  }

}
